<template>
  <div class="SelectMask">
    <van-popup position="bottom" :show="isShow">
      <van-picker :columns="columns" value-key="name" @cancel="selClose($event)" @confirm="selConfirm($event)" />
    </van-popup>
  </div>
</template>

<script>
  import { defineComponent, toRefs, reactive, computed } from 'vue'
  import { Popup, Picker } from 'vant'
  export default defineComponent({
    name: 'Select',
    components: {
      [Popup.name]: Popup,
      [Picker.name]: Picker,
    },
    props: {
      // 是否显示下拉选
      showPicker: {
        type: Boolean,
        default() {
          return true
        },
      },
      // 下拉选项
      columns: {
        type: Object,
        default() {
          return {}
        },
      },
    },
    emits: ['close'],
    setup(props, context) {
      let Warehouse = reactive({
        isShow: true,
        columns: [],
        // customFieldName: {
        //   //下拉选指定字段
        //   text: 'name',
        //   values: 'key',
        // },
      })
      function selConfirm(event) {
        context.emit('close', false, event)
      }
      function selClose() {
        context.emit('close', false)
      }
      Warehouse.isShow = computed(() => {
        return props.showPicker
      })
      Warehouse.columns = computed(() => {
        return props.columns
      })
      return {
        ...toRefs(Warehouse),
        selConfirm,
        selClose,
      }
    },
  })
</script>

<style lang="scss"></style>
